import React, { Component } from 'react';
import { Modal, Upload } from 'antd';

export default class Profile extends Component {
    constructor(props) {
        super(props);
        this.state = {
            previewVisible: false,
            previewImage: '',

        }
    }
    handleCancel() { this.setState({ previewVisible: false }) }
    handlePreview(imgSource) {
        this.setState({
            previewImage: imgSource,
            previewVisible: true,
        });
    }

    render() {
        const { data } = this.props;
        const { name, headImage, id } = data;
        const options = this.props.options || {};
        const route = options.route || '#detail?userId=';
        const host = window.location.host;
        const { previewVisible, previewImage } = this.state;
        const imgE = `http://47.104.2.156/${headImage}`;

        return <div className="media preview-media">
            {
                headImage ?
                    <div className="media-left">
                        <div onClick={this.handlePreview.bind(this, imgE)} style={{ width: 50, height: 50, cursor: 'pointer', borderRadius: 4, backgroundImage: `url(${imgE}),url(/dist/images/default.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }}></div>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel.bind(this)}>
                            <img alt="example" style={{ width: '100%' }} src={previewImage} />
                        </Modal>
                    </div>
                    : ''
            }
            <div className="media-body userNameContainer">
                {id ? <a className="media-heading" href={route + id}>{name ? name : '--'}</a> : name ? name : '--'}
            </div>
        </div>
    }
}
